<template>
	<view class="TechnicianDetails-page">
		<view class="banner">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500"
				indicator-active-color="rgba(255,255,255,1)">
				<swiper-item v-for="item in infoData.ossVoList" :key="item">
					<div class="bannerimg">
						<image :src="item.url" mode="aspectFill"></image>
					</div>
				</swiper-item>
			</swiper>
		</view>
		<view class="Details-tbody">
			<view class="Technician-header">
				<view class="Technician-name  flex-between">
					<text>{{infoData.nickName}}</text>
					<text class="status">{{infoData.isReservation?'可预约':'服务中'}}</text>
				</view>
				<view class="label-item">
					<template v-for="(item,i) in tagList" :key="i">
						<uv-tags v-if="i<5" :text="item" :type="tabtypeList[i]" plain plainFill size="mini"></uv-tags>
					</template>

				</view>
				<view class="info-foot ">
					<view class="item">
						<view class="icon-box">
							<uv-icon name="account" color="#666" size="24"></uv-icon>
						</view>
						已服务人数
						<text class="orange">{{infoData.orderNum?infoData.orderNum:0}}</text>
						人
					</view>
					<view class="item">
						<view class="icon-box">
							<uv-icon name="star" color="#666" size="18"></uv-icon>
						</view>
						<text>好评率：</text>
						<text class="orange">{{infoData.evaluateNum?infoData.evaluateNum:0}}%</text>
					</view>
				</view>
			</view>
			<view class="Technician-info">
				<view class="tab-box">
					<uv-tabs lineWidth="30" lineColor="#60bcbb" :activeStyle="{color: '#60bcbb',fontWeight: 'bold'}"
						:list="list" @click="click" :scrollable="false"></uv-tabs>
				</view>
				<view class="good-list" v-if="showIndex==0">
					<template v-if="infoData.fhServicePackageVoList&&infoData.fhServicePackageVoList.length">
						<view class="goodItem" v-for="item in infoData.fhServicePackageVoList">
							<view class="item-img flex-grow-0">
								<image :src="item.servicePathIcon?item.servicePathIcon:'/static/images/good.png'"
									mode="aspectFill"></image>
							</view>
							<view class="item-cont flex-grow-1">
								<view class="name font32">{{item.serviceName}}</view>
								<view class="ds">
									服务时长：<text>{{item.serviceDate}}分钟</text>
								</view>
								<view class="price">
									￥{{item.servicePrice}}
								</view>
								<view class="btn" @click="goto(item)">
									<uv-button color="#5ebcbc" size="small"
										:customStyle="{width:'150rpx','border-radius':'30rpx',padding:'0px'}">立即预约</uv-button>
								</view>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="NoInfo-title">暂无数据</view>
					</template>

				</view>
				<view class="evaluate-list" v-if="showIndex==1">
					<template v-if="fhUserEvaluateVoList&&fhUserEvaluateVoList.length">
						<view class="evaluate-item" v-for="(item,i) in fhUserEvaluateVoList" :key="i">
							<view class="user-header flex-y-center">
								<view class="user-img flex-grow-0">
									
									<!-- <image :src="item.khAvatarPath" mode=""></image> -->
									<uv-image :src="item.khAvatarPath" width="30px" height="30px"></uv-image>
								</view>
								<view class="user-name flex-grow-1">
									{{item.khNickName}}
								</view>
								<view class="user-time flex-grow-0">{{item.createTime}}</view>
							</view>
							<view class="evaluate-cont">
								<view class="evaluate-text">
									{{item.evaluateRemark}}
								</view>
								<view class="evaluate-imagelist" v-if="item.ossVoListPath&&item.ossVoListPath.length">
									<view class="image-box" v-for="v in item.ossVoListPath" :key="v">
										<!-- <image :src="v.url" mode="aspectFill"></image> -->
										<PicturePreview :src="v.url" mode="aspectFill"/>
									</view>
								</view>
								<view class="score-list">
									<view class="score-item">
										<view class="score-name">力度评分：</view>
										<uv-rate :count="5" v-model="item.strengthEvaluate" active-color="#ff0000"></uv-rate>
									</view>
									<view class="score-item">
										<view class="score-name">温度评分：</view>
										<uv-rate :count="5" v-model="item.temperatureEvaluate" active-color="#ff0000"></uv-rate>
									</view>
								</view>
							</view>
						</view>
					</template>

				</view>

			</view>
		</view>
		<view class="" style="height: 140rpx;"></view>
		<view class="page-foot flex-y-center">
			<view class="home" @click="goHome">
				<image src="/static/images/nav1-active.png" mode="widthFix"></image>
				<text>首页</text>
			</view>
			<uv-button color="#5ebcbc" @click="call" :customStyle="{width:'564rpx','border-radius':'20rpx'}">
				<uv-icon name="phone-fill" color="#fff" size="20"></uv-icon>
				<text>拨打电话</text>
			</uv-button>
		</view>
	</view>
</template>

<script>
	import GoodItem from '@/components/goods-item/goods-item.vue'
	export default {
		components: {
			GoodItem
		},
		data() {
			return {
				list: [{
					name: '服务列表',
				}, {
					name: '用户评价'
				}],
				showIndex: 0,
				rateValue: 5,
				userId: null,
				infoData: {},
				tabtypeList: [
					'primary',
					'warning',
					'success',
					'info',
					'error',
				],
				tagList: [],
				fhUserEvaluateVoList: [] //评价列表
			}
		},
		onLoad(option) {
			//option 上个页面传递的参数。
			this.userId = option.userId; //上个页面传递的参数。
			this.getList();
		},
		methods: {
			async getList() {
				// 技师详情数据-数据
				const {
					data,
					code
				} = await this.muajax.getJsUserId({}, {
					urlRewrite: url => `${url}/${this.userId}`
				});
				this.infoData = data
				this.fhUserEvaluateVoList = data.fhUserEvaluateVoList
				let obj = this.infoData.userHealthAssociationMap
				for (const key in obj) {
					if (obj.hasOwnProperty(key)) {
						console.log(key, obj[key]);
						this.tagList.push(obj[key])
					}
				}
			},
			click(item) {
				// this.show = true
				console.log('item', item);
				this.showIndex = item.index
			},
			goto(item) {
				console.log(item)
				this.$store.dispatch('saveData', {
					field: 'placeOrder',
					value: {
						userId: this.infoData.userId,
						userName: this.infoData.nickName, //技师名称
					},
					// keep: true,
				})
				uni.navigateTo({
					url: '/pages/productDetails/productDetails?serviceId=' + item.serviceId
				})
			},

			call() {
				uni.makePhoneCall({
					phoneNumber: this.infoData.phonenumber,
					success: () => {
						uni.showToast({
							title: '拨打电话成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						uni.showToast({
							title: '拨打电话失败',
							icon: 'none'
						});
						console.error(err);
					}
				})
			},

			goHome() {
				uni.switchTab({
					url: '/pages/home/home'
				})
			},

		}
	}
</script>

<style scoped lang="less">
	page {
		background: #f1f1f1;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.banner {
		width: 100%;
		height: 750rpx;
		position: relative;

		.swiper {
			height: 100%;
		}

		.bannerimg {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.Details-tbody {
		padding: 30rpx;
		position: relative;
		box-sizing: border-box;

		.Technician-header {
			background-image: linear-gradient(180deg,
					#ffeded 0%,
					#ffffff 100%),
				linear-gradient(#f6f6f6,
					#f6f6f6);
			background-blend-mode: normal,
				normal;
			border-radius: 10rpx;
			padding: 30rpx;
			padding-bottom: 0px;
			box-sizing: border-box;
		}

		.Technician-name {
			font-size: 36rpx;
			font-weight: bold;
			align-items: center;

			.status {
				font-size: 24rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 29rpx;
				letter-spacing: 0rpx;
				color: #ff7c00;
			}
		}

		.Technician-ds {
			margin: 20rpx 0px;
			color: #666;
		}

		.info-foot {
			height: 85rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #666;
			border-top: 1px solid #f1f1f1;
			font-size: 24rpx;

			.item {
				display: flex;
				align-items: center;
			}

			.icon-box {
				margin-right: 10rpx;
			}

			.orange {
				color: #ff7800;
			}
		}
	}

	.Technician-info {
		width: 690rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 30rpx 0px;
	}

	.tab-box {
		height: 113rpx;
		border-bottom: 1px solid #f1f1f1;
		align-items: center;
		justify-content: center;

	}

	.page-foot {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		z-index: 999;
		height: 121rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 3rpx 0rpx rgba(0, 0, 0, 0.35);
		padding: 0px 30rpx;
		justify-content: space-between;
		box-sizing: border-box;

		.home {
			color: #5ebcbc;
		}
	}

	.label-item {
		display: flex;
		padding: 24rpx 0px;

	}

	.goodItem {
		width: 100%;
		// height: 210rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		display: flex;
		padding: 15rpx;
		box-sizing: border-box;
		position: relative;
		align-items: center;
		border-bottom: 1px solid #f1f1f1;

		.item-img {
			width: 182rpx;
			height: 182rpx;
			background-color: #f6f6f6;
			border-radius: 10rpx;
			background: #f1f1f1;
			margin-right: 23rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.fw {
			position: absolute;
			top: 15rpx;
			right: 30rpx;
			color: #61bfbe;

		}

		.name {
			color: #333;
			font-weight: bold;

		}

		.ds {
			margin: 20rpx 0px;
			color: #666;

			text {
				color: #333;
			}
		}

		.label-item {
			display: flex;
			// padding: 24rpx 0px;

		}

		.btn {
			position: absolute;
			bottom: 30rpx;
			right: 20rpx;


		}
	}

	.price {
		color: #ff0000;
	}


	.evaluate-list {
		.evaluate-item {
			padding: 30rpx;
			border-bottom: 1px solid #f1f1f1;

			.user-img {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 22rpx;
			}

			.user-name {
				color: #333333;
			}

			.user-time {
				color: #666666;
			}
		}

		.evaluate-cont {
			margin: 20rpx 0px;

			.evaluate-text {
				color: #666666;
			}
		}

		.evaluate-imagelist {
			display: flex;
			flex-wrap: wrap;

			.image-box {
				width: 180rpx;
				height: 180rpx;
				margin: 10rpx;

			}
		}

		.score-item {
			display: flex;
			align-items: center;
			color: #666;
		}
	}
</style>